<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- 1. 导入Vue插件 -->
   <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
</head>
<body>
   <!-- 2. 准备容器 -->
   <div id="app">
       <h2>{{ good.name }}</h2>
       <p>单价：￥{{ good.price.toFixed(2) }}</p >
       <p>库存：{{ good.amount }}</p >
       <p>购买数量：{{ good.count }}</p >
       <p>{{ stockStatus }}</p >
       <p>包邮：{{ isFreeShipping ? '是' : '否' }}</p >
       <p>总价：￥{{ totalPrice.toFixed(2) }}</p >
       <p>折后价：￥{{ finalPrice.toFixed(2) }}</p >
   </div>
   <script>
       // 3. 解构 Vue 函数
       let { createApp, ref, computed } = Vue
       // 4. 创建Vue实例
       createApp({
           setup() {
               // ===== 原始数据（学生不许动） =====
               const good = ref({
                   name:"麻辣王子",
                   price: 18.9,    // 价格
                   amount:200,      // 存量
                   count: 15,   // 购买的数量
                   discount: 0.95,    // 打折
                   freeShipping: 10,  // 包邮门槛
               })

               // 库存状态
               const stockStatus = computed(() => {
                   return good.value.amount > 0 ? '可购买' : '售罄';
               })

               // 是否包邮
               const isFreeShipping = computed(() => {
                   return good.value.count >= good.value.freeShipping;
               })

               // 总价
               const totalPrice = computed(() => {
                   return good.value.price * good.value.count;
               })

               // 折后价
               const finalPrice = computed(() => {
                   return totalPrice.value * good.value.discount;
               })

               // 返回值
               return {
                  good,
                  stockStatus,
                  isFreeShipping,
                  totalPrice,
                  finalPrice
               }
           }
       }).mount("#app") // 5. 挂载实例
   </script>
</body>
</html>